<template>
  <div class="content">
    <div class="circleList">
      <!-- 优秀手写教案 -->
      <div class="listCon" @click="toHandle">
        <div class="con_l">
          <img src="/img/circle/circle1.png" alt="">
          <span>优秀手写教案</span>
        </div>
        <div class="con_r">
          <img src="/img/circle/next.png" alt="">
        </div>
      </div>
      <!-- 优秀备课视频 -->
      <div class="listCon" @click="toBeiKe">
        <div class="con_l">
          <img src="/img/circle/circle2.png" alt="">
          <span>优秀备课视频</span>
        </div>
        <div class="con_r">
          <img src="/img/circle/next.png" alt="">
        </div>
      </div>
      <!-- 精彩视频 -->
      <div class="listCon haveNoLine" @click="toVideo">
        <div class="con_l">
          <img src="/img/circle/circle3.png" alt="">
          <span>精彩视频</span>
        </div>
        <div class="con_r">
          <img src="/img/circle/next.png" alt="">
        </div>
      </div>
    </div>
    <!-- 与我相关 -->
    <div class="listConMine" @click="relatedToMe">
      <div class="con_l">
        <div class="aboutMine">
          <img src="/img/circle/circle4.png" alt="">
          <div class="redCircle" v-if="flag"></div>
        </div>
        <span>与我相关</span>
      </div>
      <div class="con_r">
        <span>您有{{number}}条相关信息</span>
        <!-- <span v-if="number <= 0">暂无消息</span> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0,
      number1: 0,
      number2: 0,
      number3: 0,
      flag: false,
      fromMeS: []
    };
  },
  mounted() {
    this.messageNumber();
  },
  methods: {
    // 与我相关的消息数
    messageNumber() {
      (async () => {
        const { data } = await this.get("/approve/beRelatedToMe", {
          userId: localStorage.getItem("id"),
          status: 2
        });
        for (var i=0; i<data.fromMeS.length; i++) {
          if (data.fromMeS[i].username != localStorage.getItem("userName")) {
            this.fromMeS.push(data.fromMeS[i]);
          }
        }
        this.number1 = this.fromMeS.length;
        this.number2 = data.toMes.length;
        this.number3 = data.icrobotDianzans.length;
        this.number = this.number1 + this.number2 + this.number3;
        // this.number = data.count;
        if (this.number > 0) {
          this.flag = true;
        } else {
          this.flag = false;
        }
      })();
    },
    // 手写教案
    toHandle() {
      localStorage.setItem("cycleListOrder", 0);
      this.$router.push({
        path: "/circleList",
        query: {
          type: 0,
        },
      });
    },
    // 备课视频
    toBeiKe() {
      localStorage.setItem("cycleListOrder", 1);
      this.$router.push({
        path: "/circleList",
        query: {
          type: 1,
        },
      });
    },
    // 精彩视频
    toVideo() {
      localStorage.setItem("cycleListOrder", 2);
      this.$router.push({
        path: "/circleList",
        query: {
          type: 2,
        },
      });
    },
    // 与我相关
    relatedToMe() {
      if (this.number > 0) {
        this.$router.push("/relatedToMe");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  background-color: #f7f9fa;
  font-size: 0.1rem;

  .circleList {
    border-top: 0.01rem #f7f9fa solid;
    width: 7.5rem;
    background: #ffffff;
    padding: 0 0.24rem;
    box-sizing: border-box;
    .listCon {
      width: 100%;
      height: 1rem;
      display: flex;
      justify-content: space-between;
      border-bottom: 0.01rem #e7e7e7 solid;
      .con_l {
        display: flex;
        align-items: center;
        img {
          width: 0.53rem;
          height: 0.54rem;
        }
        span {
          font-size: 0.3rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333;
          margin-left: 0.12rem;
        }
      }
      .con_r {
        display: flex;
        align-items: center;
        img {
          width: 0.14rem;
          height: 0.16rem;
        }
        span {
          font-size: 0.22rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #9c9c9c;
        }
      }
    }
    .haveNoLine {
      border: 0;
    }
  }
  .listConMine {
    margin-top: 0.16rem;
    padding: 0 0.24rem;
    width: 7.5rem;
    height: 1rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    .con_l {
      display: flex;
      align-items: center;
      .aboutMine {
        position: relative;
        img {
          width: 0.53rem;
          height: 0.54rem;
        }
        .redCircle {
          width: 0.14rem;
          height: 0.14rem;
          background-color: #f00;
          border-radius: 50%;
          position: absolute;
          top: -0.07rem;
          right: -0.07rem;
        }
      }
      span {
        font-size: 0.3rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #5f5f5f;
        margin-left: 0.13rem;
      }
    }
    .con_r {
      span {
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #9b9b9b;
      }
    }
  }
}
</style>